<template>
  <section class="q-pt-md">
    <div v-if="title" class="row items-center q-mx-sm q-mb-sm">
      <h2 class="col title size-24 text-shadow-white q-pb-sm">{{ title }}</h2>
      <q-btn v-if="link" @click="$router.push(link)" dense label="更多" flat color="grey-7"/>
    </div>
    <div class="row">
      <a-map-image-box class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-xs-12 q-pa-sm q-mb-md"
                       v-for="map in maps"
                       :key="map.id"
                       :simple="simple"
                       :open-map="openMap"
                       :map="map"
                       @click="$emit('click', $event)">
      </a-map-image-box>
    </div>
  </section>
</template>

<script>
  import AMapImageBox from './mapImageBox'

  export default {
    name: 'aMapImageBoxes',
    components: {AMapImageBox},
    props: {
      title: {
        type: String,
        required: false
      },
      maps: {
        type: Array,
        required: true
      },
      simple: {
        type: Boolean,
        required: false,
        default: false
      },
      link: {
        type: String,
        required: false
      },
      openMap: {
        type: Boolean,
        required: false,
        default: true
      }
    }
  }
</script>
